<template>
    <div class="page home">
        <swipe :autoplay="4000" v-if="bannerData">
            <swipe-item v-for="(banner, index) in bannerData" :key="index" @click="swipeAction">
                <img :src="banner.imgUrl" class="swipe_img" />
            </swipe-item>
        </swipe>
        <div class="main_fun box shadow radius mt10">
            <van-row @click="payAction">
                <van-col span="8">
                    <div class="fun_cell">
                        <van-icon name="credit-pay" size="44" />
                        <div class="title">刷卡收款</div>
                    </div>
                </van-col>
                <van-col span="8">
                    <div class="fun_cell">
                        <van-icon name="scan" size="44" />
                        <div class="title">扫码收款</div>
                    </div>
                </van-col>
                <van-col span="8">
                    <div class="fun_cell">
                        <van-icon name="qr" size="44" />
                        <div class="title">二维码收款</div>
                    </div>
                </van-col>
            </van-row>
        </div>

        <div class="box mt10 shadow radius">
            <notice-bar left-icon="volume-o" text="这是一个通知区域.这是一个通知区域.这是一个通知区域.这是一个通知区域." />
        </div>

        <div class="box mt10">
            <grid clickable icon-size="40px">
                <grid-item v-for="grid in gridData" :key="grid.id" :icon="grid.icon" :text="grid.text" @click="gridClick(grid)"></grid-item>
            </grid>
        </div>
        <pop-inp ref="popInpRef" @commit="bindMainDevice"></pop-inp>
    </div>
</template>

<script>

import { mapState } from "vuex";
import { Swipe, SwipeItem, NoticeBar } from "vant";
import { Grid, GridItem } from 'vant';
import PopInp from "@/components/pop/pop-inp";

export default {

    components: { NoticeBar, Swipe, SwipeItem, Grid, GridItem, PopInp },

    data() {
        return {
            device: {},
        };
    },

    provide() {
        return {
            sendCode: this.sendBindDeviceCode,
        };
    },

    // mounted() {},

    computed: {
        ...mapState({
            bannerData: state => state.homeData.bannerData,
            custInfo: state => state.homeData.custInfo,
            userInfo: state => state.userInfo,
            sdkInfo: state => state.sdkInfo,
        }),

        gridData() {
            return [
                { id: 1, text: "我的费率", icon: require('@/assets/img/pages/index-edit-tools.png') },
                { id: 2, text: "店员管理", icon: require('@/assets/img/pages/index-group.png') },
                { id: 3, text: "我要推广", icon: require('@/assets/img/pages/index-paper-plane.png') },
                { id: 4, text: "常见问题", icon: require('@/assets/img/pages/index-online-conference.png') }
            ]
        }
    },

    methods: {

        // banner点击
        swipeAction(e) {
            console.log(e)
        },

        // 去支付
        payAction() {
            // 是否可以进行支付
            if (this.custInfo.canPayFlag) {
                const regStatus = this.sdkInfo.regStatus;
                if (regStatus == '0') { // 0 商户已开通且已绑定主设备
                    this.$router.push("/pay");
                } else if (regStatus == '1') { // 1 商户已开通但未绑定本设备
                    // 绑定设备操作
                    this.sendBindDeviceCode(true);
                } else if (regStatus == '2') { // 2 该账号下没有商户
                    this.$toast("该账号下没有商户");
                } else if (regStatus == '3') { // 3 商户正在审核中->请耐心等待
                    this.$toast("商户正在审核中->请耐心等待");
                } else if (regStatus == '4') { // 4 该用户为子设备（店员）且已绑定子设备
                    this.$router.push("/pay");
                } else if (regStatus == '5') { // 5 该用户为子设备（店员）但未绑定子设备
                    // 绑定设备操作
                } else if (regStatus == '6') { // 6 不可知
                    this.$toast("未知错误");
                } else {
                    // 查询设备绑定状态
                    this.$store.dispatch("checkDeviceStatus");
                    this.$toast("系统错误");
                }
            } else {
                if (['00', '01', '02', '03'].indexOf(this.custInfo.merchantStatus) !== -1) {
                    this.$router.push("/infoverify");
                } else {
                    if (this.custInfo.merchantStatus == '04') {
                        this.$toast("商户进件审核中");
                    } else if (this.custInfo.merchantStatus == '05') {
                        this.$toast("商户进件审核完成");
                    } else {
                        this.$toast("未知异常");
                    }
                }
            }
        },

        // 收款方式; 1刷卡，2扫码
        collection(type) {
            console.log(type)
            // 去开户流程
            this.$router.push("/infoverify");
        },

        // 九宫格点击
        gridClick(grid) {
            const { id } = grid;
            if (id == 1) {
                this.$router.push("/myRate");
            } else if (id == 2) { // 店员管理
                if (this.custInfo.canPayFlag) {
                    this.$router.push("/staffHome");
                } else {
                    this.$router.push("/infoverify");
                }
            } else if (id == 3) {
                this.$router.push("/accountUpgrade");
            } else if (id == 4) {
                this.$router.push("/question");
            }
        },

        // 主设备绑定： 发送短信验证码
        sendBindDeviceCode(flag = false) {
            // TODO MOCK
            // const userId = "U0004272000000008";
            // const merId = "QRC483100000000";
            // const tell = "18217595408";

            const params = {
                userId: this.userInfo.userId, // this.userInfo.userId
                merId: this.custInfo.merId, // this.custInfo.merId
                phoneNo: this.userInfo.mobilePhone // this.userInfo.mobilePhone
            }
            return this.$bridge.GetSDKData("merchantBindingSmsReq", params).then(resp => {
                try {
                    if (flag) {
                        this.$refs.popInpRef.show();
                        this.$refs.popInpRef.startCountDown();
                    }
                    resp = JSON.parse(resp);
                    this.device.smsId = resp.smsId;
                } catch (error) {
                    console.log(error);
                }
            })
        },

        // 主设备绑定
        bindMainDevice(code) {
            // TODO MOCK
            // const userId = "U0004272000000008";
            // const merId = "QRC483100000000";

            const params = {
                smsId: this.device.smsId,
                smsCode: code,
                userId: this.userInfo.userId, // this.userInfo.userId
                merId: this.custInfo.merId, // this.custInfo.merId
            }
            return this.$bridge.GetSDKData("bindMainDevice", params).then((resp) => {
                resp = JSON.parse(resp);
                if (resp.respCode == "000000") { // 绑定成功，可以消费
                    this.$router.push("/pay");
                }
            })
        },
    }
};
</script>


<style lang="scss" scoped>
@import "@/assets/color.scss";

.home {
    padding-bottom: 80px;

    .main_fun {
        background-color: $BG_COLOR;
        color: #fff;
        padding: 20px 10px;
        font-size: 12px;
        .fun_cell {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }

    .box {
        width: 355px;
        overflow: hidden;
        margin: auto;
    }

    /deep/ .van-swipe-item {
        width: 100%;
        height: 234px;
    }

    .swipe_img {
        width: 100%;
        height: 234px;
    }

    .van-notice-bar {
        color: #333;
        font-size: 12px;
        background-color: #fff;
    }

    .cell {
        width: 100%;
        height: 80px;
        margin: auto;
        background-color: #fff;
    }

    .mt10 {
        margin-top: 10px;
    }

    .shadow {
        box-shadow: 0px 0px 10px 0px rgba(56, 119, 245, 0.1);
    }

    .radius {
        border-radius: 10px;
        overflow: hidden;
    }
}
</style>
